<template>
    <div class="customBox modelBox">
        <h3 class="title">
            <el-input v-model="searchKey" clearable placeholder="关键字"></el-input>
            <el-button class="addButton" style="margin: 0 0 0 20px;" type="primary" size="mini" round @click="refresh"
                circle title="刷新">
                <i class="el-icon-refresh"></i>
            </el-button>
            <el-button class="addButton" type="success" size="mini" round @click="newFun" circle title="添加">
                <i class="el-icon-plus"></i>
            </el-button>
        </h3>
        <!-- 
        <el-row class="modalItem" v-for="(item, index) in funArray" :key="index">
            <el-col :span="24" class="modelName">{{item.str}} <span style="color: #999;">{{item.name}}</span>
            </el-col>
            <el-col :span="24">

            </el-col>
        </el-row> -->


        <div class="customBox-body">
            <div class="empty" v-if="!items.length">
                暂无数据
            </div>
            <el-card class="box-card" v-for="(item, index) in items" :key="index" :body-style="{ padding: '0px' }">
                <div slot="header" class="clearfix">{{item.key}}</div>
                <div style="color: #999; padding: 20px;">{{item.name}}</div>
                <div class="box-card-buttons">
                    <el-button size="mini" type="warning" icon="el-icon-edit-outline" @click="editFun(item)" round>
                        编辑
                    </el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete" round @click="deleteFun(item)">
                        删除
                    </el-button>
                </div>
            </el-card>
        </div>

        <el-dialog title="编辑自定义方法" append-to-body :class="theme" :close-on-click-modal="false"
            :visible.sync="showJsEditor" width="800px">
            <el-row :gutter="5" style="padding: 0 0 5px 0;">
                <el-col :span="6" style="line-height: 40px;">可插入字符:</el-col>
                <el-col :span="18">
                    <el-input v-model="activeObj.key" placeholder="可插入字符"></el-input>
                </el-col>
            </el-row>
            <el-row :gutter="5" style="padding: 0 0 5px 0;">
                <el-col :span="6" style="line-height: 40px;">备注 :</el-col>
                <el-col :span="18">
                    <el-input v-model="activeObj.name" placeholder="备注"></el-input>
                </el-col>
            </el-row>

            <el-input type="textarea" class="CodeMirror-custom" :rows="14" resize="none" v-model="activeObj.code"
                placeholder="输入执行代码"></el-input>
            <br>
            <br>

            <el-row :gutter="5" style="padding: 0 0 5px 0;">
                <el-col :span="20">
                    <el-input v-model="activeObj.test" placeholder="测试代码"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-button style="float: right;" type="success" size="samll" @click="runFunction">测试</el-button>
                </el-col>
            </el-row>

            <el-row :gutter="5" style="padding: 0 0 5px 0;">
                <el-col :span="24" v-if="ans === ''">运行结果 ：未返回任何结果</el-col>
                <el-col :span="24" v-if="ans === undefined">运行结果 ：undefined</el-col>
                <el-col :span="24" v-if="ans === null">运行结果 ：null</el-col>
                <el-col :span="24" v-if="ans">运行结果 ：{{ans}}</el-col>
            </el-row>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="samll" @click="save">保存</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        data() {
            return {
                ans: '',
                activeObj: {},
                showJsEditor: false,
                searchKey: '',
                
            }
        },
        computed: {
            ...mapState("theme", {
                theme: state => state.theme,
            }),
            ...mapState("fun", {
                funArray: state => state.funArray,
            }),
            items: function () {
            

                let _search = this.searchKey;
                let reg = new RegExp(_search, 'ig'); // 不区分大小写
                if (_search) {
                    return this.funArray.filter(function (item) {
                        if (item.key.toString().match(reg) || item.name.toString().match(reg)) {
                            return item;
                        }
                    });
                }
                return this.funArray;
            },
        },
        methods: {
            refresh() {
                this.$store.dispatch('fun/getRenderData');
            },
            runFunction() {
                try {
                    var ans = '';
                    eval(this.activeObj.code + ';ans = ' + this.activeObj.test);
                    this.ans = ans;
                } catch (error) {
                    this.ans = error;
                };
            },
            newFun() {
                this.ans = '';
                this.activeObj = {
                    functionId: false,
                    name: '',
                    key: '',
                    code: '',
                    test: '',
                };
                this.showJsEditor = true;
            },
            deleteFun(item) {
                var confirm = this.$confirm('删除该函数将导致之前使用该函数的API测试出现BUG , 是否删除该函数？');
                if (confirm) {
                    this.$store.dispatch('fun/deleteFunction', item.functionId);
                }
            },
            editFun(item) {
                this.ans = '';
                this.activeObj = JSON.parse(JSON.stringify(item));
                this.showJsEditor = true;
            },
            save() {
                if (!this.activeObj.key) {
                    this.$message.error('可插入字符不能为空');
                    return;
                };
                if (!this.activeObj.name) {
                    this.$message.error('备注不能为空');
                    return;
                };
                if (!this.activeObj.code) {
                    this.$message.error('可执行代码不能为空');
                    return;
                };
                if (this.activeObj.functionId) {
                    var confirm = this.$confirm('是否更新全局方法？');
                    if (confirm) {
                        this.$store.dispatch('fun/updateFunction', {
                            id: this.activeObj.functionId,
                            key: this.activeObj.key,
                            name: this.activeObj.name,
                            code: this.activeObj.code,
                            test: this.activeObj.test,
                            callback: () => {
                                this.showJsEditor = false;
                            }
                        });
                    };
                } else {
                    var confirm = this.$confirm('是否创建全局方法？');
                    if (confirm) {
                        this.$store.dispatch('fun/creatFunction', {
                            key: this.activeObj.key,
                            name: this.activeObj.name,
                            code: this.activeObj.code,
                            test: this.activeObj.test,
                            callback: () => {
                                this.showJsEditor = false;
                            }
                        });
                    };
                }
            },
        },
    }

</script>
<style scoped>
    .title {
        display: flex;
        height: 40px;
        align-items: center;
    }

    .title .key {
        color: #666;
    }

    .addButton {
        width: 28px;
        height: 28px;
    }

    .box-card {
        margin: 0 0 20px 0;
    }

    .box-card-buttons {
        margin: -1px 0 0 0;
        padding: 10px;
        border-top: 1px solid #EBEEF5;
        position: relative;
        text-align: right;
    }

    .empty {
        text-align: center;
        line-height: 100px;
        color: #aaa;
    }
</style>